<template>
    <div class="absolute inset-0">
        <TopologyEditor :editable="false" :data="data" v-if="types" :key="keybalues" />
        <div v-else class="flex justify-center items-center h-full">
            <img src="@/assets/screenimg/null-copy.png" />
        </div>

    </div>
</template>
<script lang="ts" setup>
import TopologyEditor from '@/components/TopologyEditor/index.vue'
import { getTopoInfo } from '@/api/screen';
import { useDataDashboardThemeStoreHook } from '@/store/modules/data-dashboard-theme'
import { configurationPageStore } from '@/store/modules/configurationPage';
const useDataDashboardThemeStore = useDataDashboardThemeStoreHook()
import {
    debounce
} from "@pureadmin/utils";
const data = ref('')
const types = ref(true)
let store = configurationPageStore()
const keybalues = ref(0)
const getTopoInfodata = (id) => {
    if(id==0){
        types.value = false
        return;
    }
    getTopoInfo({
        id: id
    }).then(res => {
        types.value = true
        data.value = JSON.stringify(res.result.topoInfo.topoData)
        store.setTopoId(res.result.topoInfo.id)
        store.setTopoName(res.result.topoInfo.topoName)
        store.setProjectId(res.result.topoInfo.projectId)
    }).catch(err => {
        types.value = false
    })
}
const keybaladd = () => {
    setTimeout(() => {
        keybalues.value++
    }, 600);
}
let timer = null;
function throttle(fn, delay) {
    if (timer == null) {
        timer = setTimeout(() => {
            fn();
            clearTimeout(timer);
            timer = null;
        }, delay);
    } else {
        console.log(111111);

        clearTimeout(timer);
        timer = null;
        timer = setTimeout(() => {
            fn();
            clearTimeout(timer);
            timer = null;
        }, delay);
    }
}
onMounted(() => {
    //监听窗口变化
    window.addEventListener('resize', () => {
        throttle(keybaladd, 500)
    })
})

watch(() => useDataDashboardThemeStore.GET_SETTING('building'), (newValue, oldValue) => {
    console.log('监听组态变化',newValue);
    
    if (useDataDashboardThemeStore.GET_SETTING('dataDashboardIsHidden') == 1) {
        getTopoInfodata(useDataDashboardThemeStore.GET_SETTING('projectInfo').topoId)
    } else {
        getTopoInfodata(useDataDashboardThemeStore.GET_SETTING('building')?.drawingInfo?.drawingInfo?.topoId)
    }
}, { immediate: true, deep: true })
watch(() => useDataDashboardThemeStore.dataDashboardIsHidden, (newValue, oldValue) => {
    if (useDataDashboardThemeStore.GET_SETTING('dataDashboardIsHidden') == 1) {
        getTopoInfodata(useDataDashboardThemeStore.GET_SETTING('projectInfo').topoId)
    } else {
        getTopoInfodata(useDataDashboardThemeStore.GET_SETTING('building')?.drawingInfo?.drawingInfo?.topoId)
    }
}, { immediate: true, deep: true })
</script>
